<template>
    <div>
        <div class="padding250">
            <div class="auto">
                <div class="jiaoyu clearfix">
                    <div class="titles">
                        报名项目：{{examName}}
                    </div>
                    <ul class="kemu" v-for="item in examList">
                        <li style="font-size: larger;">{{item.childexamName}}</li>
                        <span v-for="data in item.sliList">
                            <li>考试日期：{{data.time}}</li>
                            <div class="time">
                                <div class="changci" v-for="itemData in data.timeList" style="margin-top: 20px;">
                                    <p>考试场次：{{itemData.examStartTime}} - {{itemData.examendTime}}
                                        <img v-if="itemData.disabled" src="../../assets/radio5.png" alt="" class="pull-right">
                                        <img v-if="!itemData.disabled && itemData.checked" src="../../assets/radio3.png" alt="" class="pull-right" v-on:click="chooseTime(itemData, item.id)" :id="itemData.id">
                                        <img v-if="!itemData.disabled && !itemData.checked" src="../../assets/radio1.png" alt="" class="pull-right" v-on:click="chooseTime(itemData, item.id)" :id="itemData.id">
                                    </p>
                                    已报：{{itemData.signlastCount}}/{{itemData.signCount}}人
                                </div>
                            </div>
                        </span>
                    </ul>
                    <p class="tip">注：缴费报名成功后不支持退款</p>
                    <a href="javascript:;">
                        <Button class="save" v-on:click="applyBuy()">立即报名</Button>
                    </a>
                </div>

            </div>
        </div>
    </div>
</template>

<script type="text/ecmascript-6">
    import {getApplyExamList, addexam} from "../../http"

    export default {
        name: 'myzhengshubaokao',
        props: {},
        data() {
            return {
                modal: false,
                examList: [],
                examName: this.$route.query.examName,
                examId: this.$route.query.examId,
                userId: this.$route.query.userId,
                usercertificateId: this.$route.query.usercertificateId,
                sexamId: [],
                buunted: false
            };
        },
        methods: {
            chooseTime(e, examseasonId) {
                var sexamId = []
                var examseasonId = examseasonId
                var value = e.id
                var examList = this.examList
                examList.forEach(item => {
                    var examseasonIdItem = item.id
                    item.sliList.forEach(item2 => {
                        item2.timeList.forEach(item3 => {
                            if (examseasonIdItem == examseasonId) {
                                if (value == item3.id) {
                                    item3.checked = true
                                    sexamId.push(item3.id)
                                } else {
                                    item3.checked = false
                                }
                            } else {
                                if (item3.checked) {
                                    sexamId.push(item3.id)
                                }
                            }
                        });
                    });
                });
                this.examList = examList
                this.sexamId = sexamId
            },
            getApplyExamList() {
                getApplyExamList({examId: this.examId}).then(res => {
                    res.data.forEach(item => {
                        item.sliList.forEach(item2 => {
                            item2.timeList.forEach(item3 => {
                                item3.checked = false
                                item3.disabled = false
                                if (item3.signlastCount >= item3.signCount) {
                                    item3.disabled = true
                                }
                                if (item3.examStartTime) {
                                    item3.examStartTime = item3.examStartTime.substring(0, 5)
                                }
                                if (item3.examendTime) {
                                    item3.examendTime = item3.examendTime.substring(0, 5)
                                }
                            });
                        });
                    });
                    this.examList = res.data
                })
            },
            applyBuy() {
                if (!this.sexamId || this.sexamId.length <= 0) {
                    this.$Notice.warning({
                        title: "考试报名提醒",
                        desc: "请选择报考时间",
                        duration: 3,
                    });
                    return
                }
                var examSeasonList = this.examList
                for (let index in  examSeasonList) {
                    var item = examSeasonList[index]
                    var flge = false
                    for (let index2 in  item.sliList) {
                        var item2 = item.sliList[index2]
                        for (let index3 in  item2.timeList) {
                            var item3 = item2.timeList[index3]
                            if (item3.checked) {
                                flge = true
                                break
                            }
                        }
                        if (flge) {
                            break
                        }
                    }
                    if (!flge) {
                        this.$Notice.warning({
                            title: "考试报名提醒",
                            desc: '请选择' + item.childexamName + '考试场次',
                            duration: 3,
                        });
                        return
                    }
                }
                if (this.buunted) {
                    return
                }
                this.buunted = true
                var that = this
                addexam({examId: this.examId, usercertificateId: this.usercertificateId, seasonId: this.sexamId.join(',')}).then(res => {
                    console.log(res.data)
                    if (res.code == 200) {
                        var resdata = res.data;
                        resdata = JSON.stringify(resdata);
                        that.$router.push({
                            name: 'buyExam',
                            query: {
                                resdata: resdata
                            }
                        })
                    } else {
                        console.info(res)
                        that.buunted = false
                        this.$Notice.warning({
                            title: "考试报名提醒",
                            desc: res.info,
                            duration: 3,
                        });
                    }
                })
            },

        },
        created() {
            this.getApplyExamList()
        },
        components: {
        }
    }
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less" rel="stylesheet/less">
    button {
        background-color: #B2936B;
        color: #fff;
        display: inline-block;
        width: 200px;
        height: 50px;
        text-align: center;
        border-radius: 5px;
        font-size: 18px;
    }
    .padding250 .auto {
        background-color: #fff;
        width: 100%;
        .jiaoyu {
            padding: 40px;
            text-align: left;

            .titles {
                font-size: 20px;
                color: #000;

                .pull-right {
                    font-size: 16px;
                    color: #666;

                    img {
                        vertical-align: bottom;
                    }
                }
            }

            .kemu {
                font-size: 15px;
                color: #333;
                margin: 30px 0 20px;
                line-height: 30px;
            }

            .time {
                .changci {
                    box-shadow: 0px 0px 10px #ececec;
                    padding: 20px;
                    width: 330px;
                    display: inline-block;
                    margin-right: 50px;
                    border-radius: 5px;

                    &:nth-child(2n) {
                        margin-right: 0;
                    }

                    p {
                        font-size: 15px;
                        color: #000;
                        margin-bottom: 5px;

                        img {
                            width: 26px;
                            height: 26px;
                        }
                    }
                }
            }

            .tip {
                font-size: 15px;
                color: #8D663E;
                margin: 20px 0 60px;
            }
        }

    }
</style>
